<template lang="pug">
  .pendant.pos-a.animated.bounceInLeft

    .pendant-icon.znz-icon(v-if="isShowCompass", :style="znzBgStyleObj")
      span(:style='znzStyleObj')

    .pendant-icon.cart-icon.hand(v-if='getCartStatus', @click='showCart')
      //- i.iconfont.icon-cart
      span(:style="cartStyleObj")

    .pendant-icon.wx-card-icon.hand(
      v-if='getWxCardStatus',
      @click="showWxCard")
      span(:style='wxCardStyleObj')

    .pendant-icon.payreward-icon.hand.mt10(v-if='isShowReward', @click='showReward')
      span(:style="bgStyleObj")

    .pendant-icon.audio-icon.hand(v-show='hasAudioIcon', @click='toggleAudio')
      span.tac
        i.iconfont(:class="isShowAudioIcon ? 'icon-sound' : 'icon-sound_close' ")
</template>

<script>
import { mapGetters } from 'vuex'
import { isMobile } from '@/utils'
import { toggleSceneAudio } from '@/utils/audio'
import { visibleDs, visibleCompass } from '@/utils/krpano'

let timer
export default {
  data() {
    return {
      showCompass: false,
      isShowCart: false,
      isShowReward: false,
      isShowAudioIcon: false,
      hasAudioIcon: false,
      rotateNum: 0,
      bgStyleObj: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/redbag.gif)`
      },
      wxCardStyleObj: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/wx_card.png)`
      },
      cartStyleObj: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/cart.png)`
      },
      znzBgStyleObj: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/compass_bg.png)`
      },
      znzStyleObj: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/compass_arrow.png)`
      }
    }
  },
  mounted() {

    if(this.isShowCompass) {
      this.showCompass = true
    }
    // 打赏图标
    this.showRewardIcon()

    // 切换场景音乐开关icon状态
    this.showAudioIcon()

    // 场景icon状态
    this.toggleAudioStatus()

    this.$nextTick(() => {
      let token = this.$AUTH.getUserCookie('access_token')

      setTimeout(() => {
        if(token) {
          if(this.cartList) {
            this.isShowCart = true
          } else {
            this.$store.dispatch('fetchCartGoods')
          }
        }
      }, 100)
    })
  },
  computed: {
    ...mapGetters(['panoInfo', 'cartList', 'goodsCart', 'panoWxCardList', 'themeId']),
    getWxCardStatus() {
      if(this.panoWxCardList && this.panoWxCardList.length) {
        if(isMobile() && this.themeId == 4) {
          return false
        }
        return true
      }
      return false
    },
    isShowCompass() {
      return visibleCompass()
    },
    getCartStatus() {
      if(this.goodsCart) {
        if(isMobile() && this.themeId == 4) {
          return false
        }
        return this.goodsCart.list.length
      }
    },
    getCartStyle() {
      return `backgroundImage: url(${$globalconfig.URLS.API}krpano/images/cart.png)`
    }
  },
  methods: {
    showCart() {
      this.$vgo.emit('cart:show')
    },
    showAudioIcon() {
      this.$vgo.on('audioicon', (val) => {
        this.hasAudioIcon = val
        this.isShowAudioIcon = val
      })
    },
    toggleAudioStatus() {
      this.$vgo.on('toggle:musicicon', val => {
        this.hasAudioIcon = val
        this.isShowAudioIcon = val
      })
    },
    showRewardIcon() {
      if(visibleDs()) {
        if(isMobile() && this.themeId == 4) {
          this.isShowReward = false
        } else {
          this.isShowReward = true
        }
      }
    },
    showReward() {
      if(this.$AUTH.checkLogin()) {
        this.$vgo.emit('payreward:show')
      }
    },
    toggleAudio() {
      toggleSceneAudio()
    },
    showWxCard() {
      if(this.$AUTH.checkLogin()) {
        this.$router.push(`/panoview/${this.$route.params.panoId}/cardlist`)
      }
    }
  },
  watch: {
    cartList(data) {
      console.log(data)
      this.isShowCart = data ? true : false
    },
    immediate: true
  },
  watch: {
    showCompass(val) {
      let curSceneId = this.$krp.getSceneName()
      let rotate = this.$krp.getSceneData("scene[get(xml.scene)].compassrotate") || 0

      if(val) {
        timer = setInterval(() => {
          this.rotateNum = Number(rotate) + this.$krp.getView().hlookat
        }, 100)
      }
      else {
        clearInterval(timer)
      }
    },
    rotateNum(val) {
      this.znzStyleObj = {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/compass_arrow.png)`,
        transform: `rotate(${val}deg)`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/color.styl'
$danger = #FF4949
$width = 40px
$iconwidth = 30px

.pendant
  left: 5px
  z-index: 11
  .pendant-icon
    width: $width
    height: $width
    padding: 5px
    margin-top: 10px
    overflow: hidden
    i
      font-size: 34px
      color: $danger
    span
      display: block
      width: $width
      height: $width
      background-size: 100%
      background-repeat: no-repeat
  .znz-icon
    // background: url(http://editor.vgoyun.cn/krpano/plugins/compass/compass_bg.png) no-repeat
    background-size: 100% 100%
  .cart-icon
    width: $iconwidth
    height: $iconwidth
    padding: 10px
    border-radius: $iconwidth
    background-color: rgba($theme4-color, .4)
    span
      width: $iconwidth
      height: $iconwidth
  .payreward-icon
    animation: 1s bounceIn infinite
</style>
